<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>css3-22种魔法</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<link href="css/base.css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-9">
				<h1>混合模式css blend Modes</h1>
			<p class="text-success">
				Firefox 和 Safari 已经能和 Photoshop 一样支持混合模式了，Chrome 和 Opera 也通过带私有标志(-webkit- & -o-)支持
			</p>
			<div class="preview-block" style="background-blend-mode: exclusion;
	background: url('img/doge.png') no-repeat scroll 207.25px 24.25px / 433.5px auto, transparent url('img/nightsky.jpg') no-repeat scroll center center / 1665px auto"></div>
			</div>
			<div class="col-md-3">
				<div class="panel panel-default" style="margin-top: 50px;">
				<div class="panel-heading">
					<h1 class="panel-title">background-blend-mode:对应样色</h1>
				</div>
				<div class="panel-body">
					mix-blend-mode: normal;          //正常
					mix-blend-mode: multiply;        //正片叠底
					mix-blend-mode: screen;          //滤色
					mix-blend-mode: overlay;         //叠加
					mix-blend-mode: darken;          //变暗
					mix-blend-mode: lighten;         //变亮
					mix-blend-mode: color-dodge;     //颜色减淡
					mix-blend-mode: color-burn;      //颜色加深
					mix-blend-mode: hard-light;      //强光
					mix-blend-mode: soft-light;      //柔光
					mix-blend-mode: difference;      //差值
					mix-blend-mode: exclusion;       //排除
					mix-blend-mode: hue;             //色相
					mix-blend-mode: saturation;      //饱和度
					mix-blend-mode: color;           //颜色
					mix-blend-mode: luminosity;      //亮度
					mix-blend-mode: initial;         //初始
					mix-blend-mode: inherit;         //继承
					mix-blend-mode: unset;           //复原
					<a class="text-warning" href="http://ilyashubin.github.io/FilterBlend/" title="">实例</a>
				</div>
			</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-9">
				<h1>边框渐变</h1>
			<p class="text-success">在边框中也能使用渐变效果了</p>
			<div class="box first"></div>
			<div class="box second"></div>
			<div class="box third"></div>
			</div>
			<div class="col-md-3">
				<div class="panel panel-default" style="margin-top: 50px;">
				<div class="panel-heading">
					linear-gradient 线性渐变
					repeating-linear-gradient 重复线性渐变
					radial-gradient 径向渐变
				</div>
				<div class="panel-body">
					background-image:linear-gradient(开始点deg，开始颜色color,结束颜色color)
					边框通过伪元素<span class="label label-success">z-index</span>,<span class="label label-warning">:before/:after</span>设置元素.box的前后样色.
					background-image: repeating-linear-gradient(-45deg开始点,#cc2a2d 0px开始color,#cc2a2d结束color 20px宽度 ,#f2f2f2 20px,#f2f2f2 40px,blue 40px,blue 60px,#f2f2f2 60px,#f2f2f2 80px);
				</div>
			</div>
			</div>
		</div>
		<!-- 复选框和单选按钮的样式 -->
		<div class="row">
			<div class="col-md-9">
				<h1>复选框和单选按钮的样式</h1>
				<p class="text-success"></p>
				<div style="padding:10px;">
					<input type="checkbox" id="check" name="check" />
 					<label for="check">Checkbox</label>
				</div>
			</div>
			<div class="col-md-3">
				
			</div>
		</div>
	</div>
</body>
</html>